<template>
  <div class="imglist-box">
    <div class="type">
      <ul>
        <li v-for="item in imglist.typelist">
          <a href="javascript:">
            <img :src="item.url" />
            {{item.typename}}
          </a>
        </li>
      </ul>
    </div>
    <div class="img">
           <ul>
             <li v-for="obj in imglist.imglist">
                <img :src="obj.imgulr" />
             </li>
           </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        imglist: {
          typelist: [{
              url: require('@/assets/mi1.png'),
              typename: "小米秒杀"

            },
            {
              url: require('@/assets/mi2.png'),
              typename: "企业团购"
            },
            {
              url: require('@/assets/mi3.png'),
              typename: "F码通道"
            },
            {
              url: require('@/assets/mi4.png'),
              typename: "米粉卡"
            },
            {
              url: require('@/assets/mi5.png'),
              typename: "以旧换新"
            },
            {
              url: require('@/assets/mi6.png'),
              typename: "话费充值",
            }
          ],
          imglist:[{
            imgulr:require('@/assets/img1.jpg')
          },
          {
            imgulr:require('@/assets/img2.jpg')
          },
          {
            imgulr:require('@/assets/mi3.jpg')
          }
          ]
        }
      }
    },
    components: {

    },
    methods: {

    }
  }
</script>

<style scoped="scoped">
  .imglist-box {
    position: relative;
    width: 100%;
    height: 13.375rem;
  }

  .imglist-box .type {
    position: absolute;
    width: 14.3rem;
    left: 10.625rem;
    background-color: #5f5650;
  }

  .imglist-box .type ul li {
    width: 4.55rem;
    height: 5.75rem;
    float: left;
    border-left: 0.0625rem solid #665e57;
    border-bottom: 0.0625rem solid #665e57;
  }

  .imglist-box .type ul li a {
    display: block;
    padding-top: 1rem;
    color: #FFFFFF;

    padding-left: 0.325rem;
  }

  .imglist-box .type ul li a img {
    display: block;
    width: 2.125rem;
    height: 2.125rem;
    margin: 0 auto;
    padding-bottom: 0.325rem;
  }
  .imglist-box .img {
    position: absolute;
    left: 26.125rem;

  }
  .imglist-box .img ul li{

      width: 26.85rem;
      height: 11.5rem;
      float: left;
      margin-right: 1.22rem;
  }
  .imglist-box .img ul li img{
    width: 26.9rem;
    max-height: 100%;


  }
</style>
